<template>
  <view class="content">
    <!-- <image class="logo" src="/static/logo.png"></image>
    <view class="text-area">
      <text class="title">{{ title }}</text>
    </view> -->
    <view style="margin-bottom: 20rpx" @click="egg">
      <image class="logo" src="/static/logo_home.png" mode="aspectFit"></image>
    </view>

    <view class="functionList" v-for="item in pages">
      <button plain type="default" class="navBtn" @click="homeNav(item.path)">
        {{ item?.style?.navigationBarTitleText }}
      </button>
    </view>

    <image
      class="pageBg"
      src="https://webplus-cn-beijing-s-5f15352f3dd7f938e56a2355.oss-cn-beijing.aliyuncs.com/222%20%281%29.png"
      mode="aspectFit"
    />
  </view>
</template>

<script>
import { pages } from "../../pages.json";

export default {
  data() {
    return {
      pages: pages.filter((item) => item?.style?.navigationBarTitleText),
    };
  },
  onLoad() {
    // if (screen.availHeight < 650) {
    //   this.smallScrn = true;
    // }
  },
  methods: {
    homeNav(path) {
      uni.navigateTo({ url: `/${path}` });
    },
  },
};
</script>

<style>
.pageBg {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 809rpx;
  height: 369rpx;
  z-index: 0;
  margin-bottom: -70rpx;
}
.content {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(#4cc2d7, #8590fd);
}

.functionList {
  /* margin: 30rpx 0px; */
}

.logo {
  height: 200rpx;
  width: 360rpx;
  margin-top: 0rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0rpx;
}

.navBtn {
  width: 560rpx;
  height: 120rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10rpx;
  border: none !important;
  color: #0067a0 !important;
  background-image: url("https://webplus-cn-beijing-s-5f15352f3dd7f938e56a2355.oss-cn-beijing.aliyuncs.com/btn2%20%281%29.png");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;

  font-size: 24rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>
